<template>
  <div>
      <van-cell  class="lnn_calendar">
          <van-icon name="arrow-left" @click="toIndex"/>
          <span>学习日历</span>
        </van-cell>
      <van-cell title="选择的日期" :value="date" poppable="true"/>
    <van-calendar v-model="show" @confirm="onConfirm" />
  </div>
</template>

<script>
import {Calendar,Cell,Icon} from 'vant'
export default {
      components:{
          [Calendar.name]:Calendar,
          [Cell.name]:Cell,
          [Icon.name]:Icon
      },
  data() {
    return {
      date: "",
      show: true
    
    };
  },
  created() {},
  mounted() {},
  methods: {
    //   日期
    formatDate(date) {
      return `${date.getMonth() + 1}月${date.getDate()}日`;
    },
    onConfirm(date) {
    //   this.show = false;
      this.date = this.formatDate(date);
    },
    // 跳转
    toIndex(){
          this.$router.push({ path:'/index'  })
    }
     
  }
};
</script>

<style scoped>
.lnn_calendar{
    width:100%;
    height:60px;
    display: flex;
    margin-bottom:-1px;
       
}
.van-icon{ 
     float: left;
}
.lnn_calendar>span{
    font-size:16px;
}
.van-cell{
    z-index:3000;
    height:50px;
    font-size:20px;
    color:red;
}
.van-cell__value--alone {
    color: #000;
    text-align: center;
    
}
.van-calendar__popup.van-popup--bottom, .van-calendar__popup.van-popup--top {
    height: 90%;
    border-radio:0px;
}
</style>
